<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎宠物医院管理系统</title>


    <script src="js/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="css/normalize.css">
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="js/jquery-md5.js"></script>


</head>
<body>

<div class="background">

    <!-- 头部 -->
    <div class="header">
        <div class="nav">
            <ul>
                <li class="welcome"></li>
                <li class="registration" onclick="registration()">挂号</li>
                <li class="balance">账户余额</li>
                <li class="foster" onclick="meFoster()">我的寄养</li>
                <li class="pet" onclick="mePet()">我的宠物</li>
                <li class="collect">收藏夹</li>
                <li class="indent">
                    <div class="indentMessagePetAndGoods">订单信息</div>
                    <span class="PetAndGoodsDIV">
                        <ul class="PetAndGoods">
                            <li class="petIndentMessage"
                                onclick="indentToPetAjax()">宠物订单</li>
                            <li class="GoodsIndentMessage"
                                onclick="indentToLifeGoodsAjax()">宠物用品订单</li>
                        </ul>
                    </span>
                </li>
                <li class="me" onclick="me()">个人信息</li>
                <li class="show-img">
                    <img src="img/show.png" height="16" width="16"/>
                </li>
                <li class="show" onclick="shopCart()">购物车</li>

                <li class="end" onclick="end()">安全退出</li>
            </ul>

        </div>
    </div>

    <!-- 主体 -->
    <div class="main">
        <div class="theme">宠物医院管理系统</div>
        <div class="theme-nav">
            <ul>
                <li class="first" onclick="loadAndShuffling()">首页</li>
                <li class="notice">公告信息</li>
                <li class="commodity"><div>商品分类</div>
                    <div class="goods-body">
                        <ul class="goods">
                            <li class="pet">宠&nbsp;物</li>
                            <li class="petTool">宠物用品</li>
                        </ul>
                    </div>
                </li>
                <li class="home">寄养信息</li>
                <li class="online">在线留言</li>
            </ul>
        </div>



        <!-- 登录和img的重叠 -->
        <div class="imgAndLogin">

            <div class="img">
                <div class="theme-message">
                    <img class="url" height="463" width="800"/>
                </div>
                <div class="message"></div>
            </div>

        </div>


    </div>
</div>


<script type="text/javascript">

    let i = 0; // 初始的图片地址
    var firstImg = true;  // 判断是否是第一张图片
    var flag=true;   // 轮播图的状态
    let time = null; // 轮播图
    var notice = false; // 公告信息的状态
    var urlPath = new Array("img/cat.jpg","img/hedgehog.png",
        "img/dog.png");
    $(".url").attr("src",urlPath[0]);

    //主函数
    $(function (){
        load();
        userMessage();
        time = setInterval(shuffling,2000);
    });

    var username ;
    // 用户的信息
    function userMessage(){
        var token = localStorage.getItem("Token");
        $.ajax({
            type:"GET",
            url:'userMessage',
            dataType:'json',
            beforeSend: function(request) {
                request.setRequestHeader("token", token);
            },
            success:function(data) {
                if (data.code == 200){
                    var name = data.extend.userMessage.name ;
                    $(".welcome").append("您好!欢迎(<span class='username'>"+name+"</span>)");
                        username = data.extend.userMessage.username;
                }else {
                    window.location.href ="index.html";
                }
            },
            error: function (){
                window.location.href ="index.html";
            }
            });
    }

    // 首页按钮
    function loadAndShuffling(){
        if ($(".imgAndLogin").text() =='' || flag  == false){
            // 清空首页信息
            $(".imgAndLogin").text("");
            inImg();
            if (firstImg){
                $(".url").attr("src",urlPath[0]);
                firstImg =false;
            }
            flag = true;
            notice = false;
            // 就是这里没有time，所有导致除了第一次点击删除了轮播图，其他的都没有清除
            time = setInterval(shuffling,2000);
        }
    }

    // 添加图片
    function inImg(){
        let imgAndLogin = $(".imgAndLogin");
        imgAndLogin.append("<div class='theme-messag'></div>")
            .append("<div class='message'></div>");
        $(".theme-messag").append(" <img class='url' height='463' width='800'style='border-radius: 5%' />");
        load();
        shuffling();
    }

    // 地址信息
    function load() {
        $.ajax({
            type:"GET",
            url:'message',
            data: {message:"首页"},
            dataType:'json',
            success:function(data) {
                if (data.code == 200 ){
                    let message = data.extend.message.content;
                    $(".message").text(message);
                }else {
                    window.location.href ="index.html";
                }
            },
            error: function (){
                window.location.href ="index.html";
            }

        });
    }
    // 轮播图
    function shuffling(){
        if (flag){
            if (urlPath[i+1] != null){
                $(".url").attr("src",urlPath[i+1]);
                // console.log(i);
                i++;
            }
            else {
                $(".url").attr("src",urlPath[0]);
                i = 0;
            }
        }

    }

    // 我的宠物和我的寄养模板
    function petAndFoster(){
        // 清空首页信息 和 停止轮播图
        $(".imgAndLogin").text("");
        firstImg =true;
        flag = false;
        notice = false;
        clearInterval(time);
        i = 0;
        var mePetDiv = $("<div></div>").addClass("mePet");
        // 导航条
        var rowNav = $("<div></div>").addClass("row rowNav");
        var colmd12 = $("<div></div>").addClass("col-md-12");
        var fosterAndPetToSpan = $("<div>我的寄养/宠物</div>").addClass("fosterAndPetToSpan");
        var h1divider = $("<div></div>").addClass("h1_divider");
        var fosterAndPet = $("<div></div>").addClass("fosterAndPet");
        var fosterMessage = $("<span>寄养信息</span>").addClass("fosterMessage");
        var petMessage = $("<span>我的宠物</span>").addClass("petMessage");
        var foster_divider = $("<div></div>").addClass("foster_divider");
        $(".imgAndLogin").append(mePetDiv);
        mePetDiv.append(rowNav);
        rowNav.append(colmd12);
        colmd12.append(fosterAndPetToSpan)
            .append(h1divider)
            .append(fosterAndPet);
        fosterAndPet.append(fosterMessage)
            .append(petMessage)
            .append(foster_divider);
    }

    // 给我的宠物添加一个点击函数
    function mePet(){
        var token = localStorage.getItem("Token");
        $.ajax({
            type:"GET",
            url:'userAndPet',
            dataType:'json',
            beforeSend: function(request) {
                request.setRequestHeader("token", token);
            },
            success:function(data) {
                if (data.code == 200){
                    // console.log(data);
                    // alert(1)
                    petAndFoster();
                    tableToPetMessage(data);
                }
            }


        });
    };
    // 我的宠物的表单信息
    function tableToPetMessage(data){
        // 我的宠物表单信息
        var rowTable = $("<div></div>").addClass("row rowToble");
        var colmd10 = $("<div></div>").addClass("col-md-10");
        var table = $("<table class='table table-bordered' id='fosterAndPet_table'></table>");
        var thead = $("<thead></thead>");
        var tr = $("<tr></tr>");
        var th1 = $("<th>账号</th>");
        var th2 = $("<th>订单编号</th>");
        var th3 = $("<th>宠物名字</th>");
        var th4 = $("<th>品种</th>");
        $(".mePet").append(rowTable);
        $(".rowToble").append(colmd10);
        colmd10.append(table);
        table.append(thead);
        thead.append(tr);
        tr.append(th1).append(th2).append(th3).append(th4);
        var emps = data.extend.userAndPet;
        $.each(emps,function (index,item){
            var username = $("<th></th>").append(item.username);
            var indentId = $("<th></th>").append(item.indentId);
            var petName = $("<th></th>").append(item.petName);
            var petVariety = $("<th></th>").append(item.petVariety);
            var myPet = $("<tr></tr>").append(username).append(indentId)
                .append(petName).append(petVariety);
            thead.append(myPet);
        });
    }
    // 给导航条下边的我的宠物绑定一个点击函数
    $(".imgAndLogin").delegate(".petMessage","click",function (){
        mePet();
    });

    // 给我的寄养添加一个点击函数
    function meFoster(){
        var token = localStorage.getItem("Token");
        console.log(token);
        $.ajax({
            type:"GET",
            url:'userToFoster',
            dataType:'json',
            beforeSend: function(request) {
                request.setRequestHeader("token", token);
            },
            success:function(data) {
                if (data.code == 200){
                    // console.log(data);
                    petAndFoster();
                    tableToFosterMessage(data);
                }else {
                    window.location.href ="index.html";
                }
            },
            error: function (){
                window.location.href ="index.html";
            }
        });
    }

    // 我的寄养的表单信息
    function tableToFosterMessage(data){
        var metPetDiv  = $("<div></div>").addClass("metPetDiv");
        // metPetDiv.append(rowTable);
        var rowTable = $("<div></div>").addClass("row rowToble");
        var colmd10 = $("<div></div>").addClass("col-md-10");
        var table = $("<table class='table table-bordered' id='fosterAndPet_table'></table>");
        var thead = $("<thead></thead>");
        var tr = $("<tr></tr>");
        var th1 = $("<th>寄养原因</th>");
        var th2 = $("<th>寄养时间</th>");
        var th3 = $("<th>审核状态</th>");
        var th4 = $("<th>操作</th>");
        $(".mePet").append(rowTable);
        $(".rowToble").append(colmd10);
        colmd10.append(table);
        table.append(thead);
        thead.append(tr);
        tr.append(th1).append(th2).append(th3).append(th4);
        var emps = data.extend.userToFoster;
        $.each(emps,function (index,item){
            var username = $("<th></th>").append(item.why);
            var indentId = $("<th></th>").append(item.data);
            var petName = $("<th></th>").append(item.audit);
            if (item.audit === "待审核"){
                var petVariety = $("<th class='deleteFoster'></th>").append("取消")
                    .attr("fosters",item.fosterId);
            }else if (item.audit === "已审核"){
                if (item.auditResults === "通过"){
                    var petVariety = $("<th class='through'></th>").append(item.auditResults);
                }else {
                    var petVariety = $("<th class='noThrough'></th>").append(item.auditResults);
                }
            }
            var myPet = $("<tr></tr>").append(username).append(indentId)
                .append(petName).append(petVariety);
            thead.append(myPet);
        });

    }

    // 给我的寄养信息的删除绑定一个点击函数
    $(".imgAndLogin").delegate(".deleteFoster","click",function (){
        var token = localStorage.getItem("Token");

        var results=confirm("你是否删除!");
        if (results==true){

            alert($(this).attr("fosters"));
            var fosterIds = $(this).attr("fosters");

            $.ajax({
                type:"DELETE",
                url:'userToDeleteFoster',
                data: {fosterId:fosterIds},
                dataType:'json',
                beforeSend: function(request) {
                    request.setRequestHeader("token", token);
                },
                success:function(data) {
                    console.log(data);
                    if (data.code == 200){
                        alert("删除成功");
                        meFoster();
                    }if (data.code == 100){
                        alert("删除失败，请刷新页面");
                    }
                },
                error: function (){
                    alert("删除失败");
                }
            });


        }


    });



    // 给导航条下边的寄养信息绑定一个点击函数
    $(".imgAndLogin").delegate(".fosterMessage","click",function (){
        meFoster();
    });

    // 给首页旁边的寄养信息绑定一个点击函数
    $(".home").click(function (){
        meFoster();
    });

    // 给公告信息绑定一个点击函数（ 因为大小变了，导致背景变了
    // 不用cover，直接搞图片的大小，设置为页面大小 ， 后期学vue改进）
    $(".notice").click(function (){
        if ($(".imgAndLogin").text() =='' || notice == false){
            $(".imgAndLogin").text("");
            firstImg =true;
            flag = false;
            clearInterval(time);
            i = 0;
            notice = true;
            $(".imgAndLogin").append("<div class='notice'>公告信息</div>")
                .append("<div class='dateAndMessage'></div>");

            $.ajax({
                type:"GET",
                url:'noticeMessage',
                dataType:'json',
                success:function(data){
                    var list = data.extend.messageList;
                    if (data.code == 200){
                        $.each(list,function(index,item){
                            // console.log(item.message);
                            var str = item.date;
                            var ipos = str.indexOf("T");
                            var date = str.substring(0,ipos);
                            // $(".dateAndMessage").append("<div class='date'></div>")
                            //     .append(" <div class='dateToMessage'></div>");
                            // $(".date").text(date);
                            // $(".dateToMessage").text(item.message);
                            var message ='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp' + item.message ;
                            var dates = $("<div class='date'></div>").append(date);
                            var dateToMessage =
                                $("<div class='dateToMessage'></div>").append(message);
                            $(".dateAndMessage").append(dates)
                                .append(dateToMessage);
                        });
                    }
                },
                error: function (){
                    window.location.href ="index.html";
                }
            });
        }

    });

    // 添加挂号模板
    function registrationTemplate(){
        $(".imgAndLogin").text("");
        firstImg =true;
        flag = false;
        notice = false;
        clearInterval(time);
        i = 0;

        var imgAndLogin = $(".imgAndLogin");
        var registrationMessage = $("<div class='registrationMessage'><div>");
        imgAndLogin.append(registrationMessage);
        var registration_h1 = $("<div class='registration-h1'></div>") ;
        var registrationDate = $("<div class = 'registrationDate'>");
        registrationMessage.append(registration_h1)
                           .append(registrationDate);
        registration_h1.append("<div>给您的宠物更好的保障</div>")
                        .append("<div class='registration_divider'></div>");
        var beginDate = $("<div class='beginDate'></div>");
        var endDate = $("<div class='endDate'></div>");
        var registrationWhy = $("<div class='registrationWhy'></div> ")
        registrationDate.append(beginDate)
                        .append(endDate)
                        .append(registrationWhy);
        var begin_h1 = $("<span class='begin-h1'>请输入开始时间:</span>");
        var beginMessage = $("<div class='beginMessage'></div>");
        beginDate.append(begin_h1).append(beginMessage);
        var beginMonthMessage = $("<input type='text' placeholder='比如1月，请写1' class='beginMonthMessage' name='beginMonthMessage'>");
        var beginDayMessage = $("<input type='text' placeholder='比如22号，请写22' class='beginDayMessage' name='beginDayMessage'>")
        beginMessage.append("<span> 请输入月份 : </span>")
                    .append(beginMonthMessage)
                    .append("<span>   请输入日期 : </span>")
                    .append(beginDayMessage);

        var end_h1 = $("<span class='end-h1'> 请输入结束时间 : </span>");
        var endMessage = $("<div class='endMessage'></div>");
        endDate.append(end_h1).append(endMessage);
        var endMonthMessage = $("<input type='text' placeholder='比如1月，请写1 'class='endMonthMessage' name='endMonthMessage'>");
        var endDayMessage = $("<input type='text' placeholder='比如22号，请写22' class='endDayMessage' name='endDayMessage'>")
        endMessage.append("<span>  请输入月份 : </span>")
                  .append(endMonthMessage)
                  .append("<span>    请输入日期 : </span>")
                  .append(endDayMessage);

        var registrationWhy_h1 = $("<span class='registrationWhy-h1'>请输入寄养的原因:</span>");
        var registrationWhyMessage = $("<div class='registrationWhyMessage'>");
        var registrationButton = $("<div class='registrationButton'>");
        registrationWhy.append(registrationWhy_h1)
                        .append(registrationWhyMessage)
                        .append(registrationButton);
        var whyMessage = $("<textarea class='whyMessage'></textarea>");
        registrationWhyMessage.append(whyMessage);
        var submit = $("<span class='submit'>提交</span>");
        var cancel = $("<span class='cancel'>取消</span>");
        registrationButton.append(submit).append(cancel);
    }

    // 给挂号添加一个点击函数
    function registration(){
        registrationTemplate();

    }

    // 给挂号模板下的提交绑定一个点击函数
    $(".imgAndLogin").delegate(".submit","click",function (){
        registrationDate();
    });

    // 给挂号模板下的取消绑定一个点击函数
    $(".imgAndLogin").delegate(".cancel","click",function (){
        $(".beginMonthMessage").val(" ");
        $(".beginDayMessage").val(" ");
        $(".endMonthMessage").val(" ");
        $(".endDayMessage").val(" ");
        $(".whyMessage").val(" ");
    });

    var datas;
    var whys;

    // 对挂号输入的信息做判断
    var beginMonthMessage;
    var beginDayMessage;
    var endMonthMessage;
    var endDayMessage;
    var whyMessage;
    function registrationDate(){
        // 输入信息
         beginMonthMessage = parseInt($(".beginMonthMessage").val());
         beginDayMessage = parseInt($(".beginDayMessage").val());
         endMonthMessage = parseInt($(".endMonthMessage").val());
         endDayMessage = parseInt($(".endDayMessage").val());
         whyMessage = $(".whyMessage").val();
        // 当前时间
        var d = new Date();
        var vYear = d.getFullYear();
        var vMoney = d.getMonth()+1;
        var vDay = d.getDate();
        var ret = /^[0-9]*$/;

            // alert(beginMonthMessage +" " + typeof beginMonthMessage + " " +
            //     beginDayMessage +" " + typeof beginDayMessage + " " +
            //     endMonthMessage + " " + typeof  endMonthMessage + " " +
            //     endDayMessage + " " + typeof endDayMessage);
            //  if ( !ret.test($(".endDayMessage").val())){
            //      alert('错误')
            //  }
        // if (!ret.test($(".beginMonthMessage").val()) && !ret.test($(".beginDayMessage").val()) &&
        //     !ret.test($(".endMonthMessage").val()) && !ret.test($(".endDayMessage").val())){
        //     alert("请正确输入年月日");
        //
        // }

        if (!ret.test($(".beginMonthMessage").val())){
            alert("请正确输入开始月份");
            return;
        }

        if (!ret.test($(".beginDayMessage").val())){
            alert("请正确输入开始日期");
            return;
        }
        if (!ret.test($(".endMonthMessage").val())){
            alert("请正确输入结束月份");
            return;
        }
        if (!ret.test($(".endDayMessage").val())){
            alert("请正确输入结束日期");
            return;
        }

        // if (beginMonthMessage == NaN || beginDayMessage == NaN ||
        //     endMonthMessage == NaN || endDayMessage == NaN){
        //     alert("请正确输入年月日");
        //     return;
        // }

        // alert(vYear+"年"+  vMoney+"月" +  vDay);
        if (beginMonthMessage<vMoney){
            alert("开始月份不能小于当前"+vMoney+"月份");
            return;
        }
        if (beginDayMessage < vDay){
            alert("开始日期不能小于当前"+vDay+"日期");
            return;
        }
        // 判断开始和结束月份是否为空
        if (beginMonthMessage == ''){
            alert("开始月份份为空");
            return;
        }
        if (endMonthMessage == ''){
            alert("结束月份不能为空");
            return;
        }

        // 判断开始和结束日期是否为空
        if (beginDayMessage == ''){
            alert("开始日期份为空");
            return;
        }
        if (endDayMessage == ''){
            alert("结束日期不能为空");
            return;
        }

        // 判断年份
        if (vYear%4 == 0){
            // 开始表示2月有29号
            if (beginMonthMessage == 2){
                // 表示29号
                if (beginDayMessage >= 29){
                    alert("当前年份最大29号");
                    return;
                }
            }

            // 结束表示2月有29号
            if (endMonthMessage == 2){
                // 表示29号
                if (endDayMessage >= 29){
                    alert("当前年份最大29号");
                    return;
                }
            }

        }else {

            // 开始表示2月有28号
            if (beginMonthMessage == 2){
                if (beginDayMessage >= 28){
                    alert("开始时间的当前月份最大28号");
                    return;
                }
            }

            // 结束表示2月有28号
            if (endMonthMessage == 2){
                if (endDayMessage >= 28){
                    alert("结束时间的当前月份最大28号");
                    return;
                }
            }
        }

        // 开始大月
        if (beginMonthMessage == 1 || beginMonthMessage == 3 || beginMonthMessage == 5
            || beginMonthMessage == 7 || beginMonthMessage == 8 || beginMonthMessage == 10
            || beginMonthMessage == 12){
            if (beginDayMessage > 31){
                alert("开始时间的当前月份最大31号");
                return;
            }
        }
        // 开始小月
        if ( beginMonthMessage == 4 || beginMonthMessage == 6
            || beginMonthMessage == 9 || beginMonthMessage == 11 ){
            if (beginDayMessage > 30){
                alert("开始时间的当前月份最大30号");
                return;
            }
        }

        // 结束大月
        if (endMonthMessage == 1 || endMonthMessage == 3 || endMonthMessage == 5
            || endMonthMessage == 7 || endMonthMessage == 8 || endMonthMessage == 10
            || endMonthMessage == 12){
            if (endDayMessage > 31){
                alert("结束时间的当前月份最大31号");
                return;
            }
        }
        // 结束小月
        if ( endMonthMessage == 4 || endMonthMessage == 6
            || endMonthMessage == 9 || endMonthMessage == 11 ){
            if (endDayMessage > 30){
                alert("结束时间的当前月份最大30号");
                return;
            }
        }


        // 判断开始和结束月份的大小
        if (beginMonthMessage > 12 || beginMonthMessage <= 0){
            alert("输入的开始月份不能超过12月，或者小于1月");
            return;
        }
        if (endMonthMessage > 12 || endMonthMessage <= 0){
            alert("输入的结束月份不能超过12月，或者小于1月");
            return;
        }

        // 判断开始和结束日期的大小
        if ( beginDayMessage <= 0){
            alert("输入的开始日期不能小于1");
            return;
        }
        if ( endDayMessage <= 0){
            alert("输入的结束日期不能小于1");
            return;
        }

        // 判断当前的月份相等，日期是否符合
        if (beginMonthMessage == endMonthMessage){
            if (beginDayMessage > endDayMessage){
                alert("结束的日期不能比开始的日期小");
                return;
            }
        }

        // 有问题String, 没有转int
        if (beginMonthMessage > endMonthMessage){
            alert("您当前的预约是跨年的操作，新年期间本店放假。请在1月7号之后再预约!");
            return;
        }

        // 挂号原因判断
        if (whyMessage == ''){
            alert("寄养原因不能为空");
            return;
        }
        if (whyMessage.length > 50){
            alert("字数请在50个字之内");
            return;
        }
        // 2022-3-27 — 2022-4-15
        datas = vYear + "-" +beginMonthMessage+"-"+beginDayMessage+" — "
            +vYear+"-"+endMonthMessage+"-"+endDayMessage;
        whys = whyMessage;
        registrationDateAjax();

    }

    // 对挂号的Ajax请求
    function registrationDateAjax(){
        var token = localStorage.getItem("Token");
        $.ajax({
            type:"POST",
            url:'registration',
            data: {why:whys,data:datas},
            dataType:'json',
            beforeSend: function(request) {
                request.setRequestHeader("token", token);
            },
            success:function(data){
                var list = data.extend.messageList;
                if (data.code == 200){
                   alert("预约成功!");
                    $(".beginMonthMessage").val("");
                    $(".beginDayMessage").val("");
                    $(".endMonthMessage").val("");
                    $(".endDayMessage").val("");
                    $(".whyMessage").val("");
                    meFoster();
                }
                if (data.code == 100){
                    alert("预约失败");
                }
            },
            error: function (){
                window.location.href ="index.html";
            }
        });


    }

    // 给订单信息绑定一个点击函数
    function indent(){
        indentAjax();
    }

    // 宠物订单信息模板
    function indentPetTemplate(data){
        // 清空首页信息 和 停止轮播图
        $(".imgAndLogin").text("");
        firstImg =true;
        flag = false;
        notice = false;
        clearInterval(time);
        i = 0;
        var imgAndLogin = $(".imgAndLogin");
        var indentMessage = $("<div class='indentMessage'></div>");
        imgAndLogin.append(indentMessage);
        var indent_h1 = $("<div class='indent-h1'></div>");
        var indentTable = $("<div class='indentTable'>");
        indentMessage.append(indent_h1).append(indentTable);
        var indent_divider = $("<div class='indent_divider'></div>");
        indent_h1.append("<div>您的订单</div>")
                 .append(indent_divider);
        var row = $("<div class='row'></div>");
        indentTable.append(row);
        var col_md_10 = $("<div class='col-md-10'></div>");
        row.append(col_md_10);
        var table = $("<table class='table table-bordered' id='indent_table'>");
        col_md_10.append(table);
        var thead  = $(" <thead></thead>");
        table.append(thead);
        var tr = $("<tr></tr>");
        thead.append(tr);
        tr.append("<th>订单编号</th>")
            .append("<th>金额</th>")
            .append("<th>时间</th>")
            .append("<th>收获地址</th>")
            .append("<th>购买物品</th>")
            .append("<th>数量</th>")
            .append("<th>支付状态</th>");
        var emps = data.extend.list;

        $.each(emps,function (index,item){
            var indentId = $("<th class='payment'></th>").append(item.indentId);
            var sumMoney = $("<th></th>").append(item.sumMoney);
            var data = $("<th></th>").append(item.data);
            var address = $("<th></th>").append(item.address);
            if (item.payment == "未付款"){
                var payment = $("<th class='noPayment'></th>").append(item.payment);
            }else {
                var payment = $("<th class='yesPayment'></th>").append(item.payment);
            }
            var tr2 = $("<tr></tr>");

                var petNum = $("<th></th>").append(item.petNum);
                    var petName = $("<th></th>").append(item.petName);
                tr2.append(indentId).append(sumMoney).append(data)
                    .append(address).append(petName).append(petNum).append(payment) ;
                thead.append(tr2);
        });

    }

    // 宠物生活用品信息模板
    function indentPetLifrGoodsTemplate(data){
        // 清空首页信息 和 停止轮播图
        $(".imgAndLogin").text("");
        firstImg =true;
        flag = false;
        notice = false;
        clearInterval(time);
        i = 0;
        var imgAndLogin = $(".imgAndLogin");
        var indentMessage = $("<div class='indentMessage'></div>");
        imgAndLogin.append(indentMessage);
        var indent_h1 = $("<div class='indent-h1'></div>");
        var indentTable = $("<div class='indentTable'>");
        indentMessage.append(indent_h1).append(indentTable);
        var indent_divider = $("<div class='indent_divider'></div>");
        indent_h1.append("<div>您的订单</div>")
            .append(indent_divider);
        var row = $("<div class='row'></div>");
        indentTable.append(row);
        var col_md_10 = $("<div class='col-md-10'></div>");
        row.append(col_md_10);
        var table = $("<table class='table table-bordered' id='indent_table'>");
        col_md_10.append(table);
        var thead  = $(" <thead></thead>");
        table.append(thead);
        var tr = $("<tr></tr>");
        thead.append(tr);
        tr.append("<th>订单编号</th>")
            .append("<th>金额</th>")
            .append("<th>时间</th>")
            .append("<th>收获地址</th>")
            .append("<th>购买物品</th>")
            .append("<th>数量</th>")
            .append("<th>支付状态</th>");
        var emps = data.extend.list;

        $.each(emps,function (index,item){
            var indentId = $("<th class='payment'></th>").append(item.indentId);
            var sumMoney = $("<th></th>").append(item.sumMoney);
            var data = $("<th></th>").append(item.data);
            var address = $("<th></th>").append(item.address);
            if (item.payment == "未付款"){
                var payment = $("<th class='noPayment'></th>").append(item.payment);
            }else {
                var payment = $("<th class='yesPayment'></th>").append(item.payment);
            }
            var tr2 = $("<tr></tr>");


                var priceNum = $("<th></th>").append(item.priceNum);
                var priceName = $("<th></th>").append(item.priceName);
                tr2.append(indentId).append(sumMoney).append(data)
                    .append(address).append(priceName).append(priceNum).append(payment) ;
                thead.append(tr2);
        });

    }

    // 宠物订单信息的Ajax
    function indentToPetAjax(){
        var token = localStorage.getItem("Token");
        $.ajax({
            type:"GET",
            url:'indentMessage',
            dataType:'json',
            beforeSend: function(request) {
                request.setRequestHeader("token", token);
            },
            success:function(data) {
                if (data.code == 200){
                    indentPetTemplate(data);
                }
                // else {
                //     window.location.href ="index.html";
                // }
            },
            // error: function (){
            //     window.location.href ="index.html";
            // }
        });
    }
         //  问题，为什么两个模板共用一个模板不行？通过if去区分数据
    // 宠物生活用品订单信息的Ajax
    function indentToLifeGoodsAjax(){
        var token = localStorage.getItem("Token");
        $.ajax({
            type:"GET",
            url:'indentToGoodsMessage',
            dataType:'json',
            beforeSend: function(request) {
                request.setRequestHeader("token", token);
            },
            success:function(data) {
                if (data.code == 200){
                    indentPetLifrGoodsTemplate(data);
                }
                // else {
                //     window.location.href ="index.html";
                // }
            },
            // error: function (){
            //     window.location.href ="index.html";
            // }
        });
    }


    // 给未付款添加一个付款函数
    $(".imgAndLogin").delegate(".noPayment","click",function (){
        alert("请付款");
    });

    // 给个人信息绑定一个点击函数
    function me(){
        // 清空首页信息 和 停止轮播图
        $(".imgAndLogin").text("");
        firstImg =true;
        flag = false;
        notice = false;
        clearInterval(time);
        i = 0;
        var imgAndLogin = $(".imgAndLogin");
        var userMessage = $("<div class='userMessage'></div>");
        var MessageToUsernameAndPassword =
                    $("<div class='MessageToUsernameAndPassword'></div>");
        imgAndLogin.append(userMessage)
                   .append(MessageToUsernameAndPassword);
        var userMessage_h1 = $("<div class='userMessage-h1'></div>");
        var userMessage_divider = $("<div class='userMessage_divider'></div>");
        userMessage.append(userMessage_h1);
        userMessage_h1.append("<div>个人信息</div>")
                   .append(userMessage_divider) ;
        MessageToUsernameAndPassword.append("<form>" +
            "<label>账号:</label>" +
            "<input readOnly type='text' placeholder='user login' name='username' id='username'>" +
            "<span class='username_after'></span>" +
            "<label>密码:</label>" +
            "<input type='password' placeholder='oldPassword' name='oldPassword' id='oldPassword'>" +
            "<span class='oldPassword_after'></span>" +
            "<label>新密码:</label>" +
            "<input type='password' placeholder='newPassword' name='newPassword' id='newPassword'>"+
            "<span class='newPassword_after'></span>" +
            "<div><label>收获地址:</label></div>" +
            "<textarea class='harvestHome'></textarea>" +
            "<span class='harvestHome_after'></span>" +
            "<div class='updatePasswordButton'>" +
            "    <span  class='btn btn-primary  passwordButton'>确定修改</span>" +
            "         <span  class='btn btn-primary cancelButton'>取消</span>" +
            "      </div>" +
            "</form>");

            $("#username").val(username);
    }

    // 给提交修改个人信息绑定一个点击函数
    $(".imgAndLogin").delegate(".passwordButton","click",function (){
        // alert("请付款");
        updatePasswordMessage();
    });

    // 修改信息的判断
    function updatePasswordMessage(){
        var oldPasswords = $("#oldPassword").val();
        var newPasswords = $("#newPassword").val();
        var addresss = $(".harvestHome").val();
        alert(oldPasswords+" " +newPasswords);
        oldPasswords = $.md5(oldPasswords);
        newPasswords = $.md5(newPasswords);
        alert(oldPasswords+" " +newPasswords);
        if (oldPasswords == '' && newPasswords == '' && addresss == ''){
            alert("不能为空");
            return;
        }
        // if (newPasswords == ''){
        //     alert("新密码不能为空");
        //     return;
        // }
        // if (oldPasswords == newPasswords) {
        //     alert("修改密码不能等于原本密码");
        //     return;
        // }

        updatePasswordMessageAjax(oldPasswords,newPasswords,addresss);
    }

    // 修改个人信息的Ajax请求
    function updatePasswordMessageAjax(oldPasswords,newPasswords,addresss){
        var token = localStorage.getItem("Token");
        $.ajax({
            type:"PUT",
            url:'userUpdatePasswordAndAddress',
            data: {oldPassword:oldPasswords,newPassword:newPasswords,address:addresss},
            dataType:'json',
            beforeSend: function(request) {
                request.setRequestHeader("token", token);
            },
            success:function(data){
                if (data.code == 200 && data.extend.password != null){
                    alert(data.extend.password);
                }

                if (data.code == 100 && data.extend.password != null){
                    alert(data.extend.password);
                }

                if (data.code == 100 && data.extend.oldPassword != null){
                    alert(data.extend.oldPassword);
                }
                if (data.code == 100 && data.extend.newPassword != null){
                    alert(data.extend.newPassword);
                }


                if ( data.code == 100 && data.extend.updateToOldAndNew != null){
                    alert(data.extend.updateToOldAndNew);
                    return;
                }
                if (data.code == 100 && data.extend.updateToNew != null){
                    alert(data.extend.updateToNew);
                    return;
                }
                if (data.code == 100 && data.extend.updateToOld != null){
                    alert(data.extend.updateToOld);
                    return;
                }
                if (data.code == 200 && data.extend.address != null){
                    alert(data.extend.address);
                }

                $("#oldPassword").val("");
                $("#newPassword").val("");
                $(".harvestHome").val("");
            },
            error: function (){
                window.location.href ="index.html";
            }
        });
    }

    // 给宠物分类下的宠物添加一个点击函数
    $(".commodity").delegate(".pet","click",function (){


        to_page(1);

    });
    // 0.分页跳转
    function to_page(pn){
        // 清空首页信息 和 停止轮播图
        $(".imgAndLogin").text("");
        firstImg =true;
        flag = false;
        notice = false;
        clearInterval(time);
        i = 0;
        var token = localStorage.getItem("Token");
        $.ajax({
            type:"GET",
            url:'petPaging',
            data:{currentPage:pn},
            dataType:'json',
            beforeSend: function(request) {
                request.setRequestHeader("token", token);
            },
            success:function(data) {
                // alert(data.code);
                if (data.code == 200){

                    // 1.宠物的列表信息
                    build_page_petMessages(data);
                    //2、解析并显示分页信息
                    build_page_info(data);
                    //3、解析显示分页条数据
                    build_page_nav(data);
                }else {
                    window.location.href ="index.html";
                }
            },
            error: function (){
                window.location.href ="index.html";
            }
        });
    }

    var petIntroduceMessage;
    var petPrice;
    // 1.显示宠物信息
    function build_page_petMessages(data) {
        var emps = data.extend.petList.records;
        var imgAndLogin = $(".imgAndLogin");
        var pet_h1 = $("<div class='pet-h1'></div>");
        var petMessages = $("<div class='petMessages'></div>");
        imgAndLogin.append(pet_h1).append(petMessages);
        pet_h1.append("<div>商品列表</div>" +
            "           <div class='pet_divider'></div>");


        var petImgAndMessage = $("<ul class='petImgAndMessage'></ul>");

        $.each(emps,function(index,item){
            var petId = item.petId;
            var petName = item.petName;
            var petUrl = item.petUrl;
            var petIntroduce = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + item.petIntroduce;
            // var petPrice = item.petPrice;

            petMessages.append(petImgAndMessage);
            var li = $("<li></li>").attr("petId",petId).attr("classify","宠物");
            var petImg = $("<span class='petImg'></span>");
            var petMessageToGoods = $("<span class='petMessageToGoods'></span>");
            petImgAndMessage.append(li);
            li.append(petImg).append(petMessageToGoods);
            var petImgMessage = $("<span class=petImgMessage></span>");
            petImg.append(petImgMessage);
            var img = $("<img class='petImgToUrl' style='width: 200px; height: 200px'>");
            img.attr("src",petUrl);
            petImgMessage.append(img);
            var petNames =  $("<span class='petName'></span>");
            petNames.append(petName);
            var petIntroduces = $("<div class='petIntroduce'></div>");
            petMessageToGoods.append(petNames).append(petIntroduces);
            petIntroduceMessage = $("<span class='petIntroduceMessage'></span>");
            petIntroduceMessage.append(petIntroduce);
            petPrice = $("<div class='petPrice'></div>");
            petPrice.append("￥"+ item.petPrice);
            var shopMessage = $("<div class='shopMessage'></div>");
            petIntroduces.append(petIntroduceMessage).append(petPrice).append(shopMessage);
            var order = $("<span class='order'></span>");
            var petId = $("<span class='petId'>立即下单</span>");
            order.append(petId);
            var shopCart = $("<span class='shopCart'></span>");
            shopMessage.append(order).append(shopCart);
            var showImg = $("<img src='img/show.png' style='width: 20px; height: 20px' >");
            shopCart.append(showImg).append("添加到购物车");

        });
    }
    // 2.解析显示宠物分页信息
    function build_page_info(data){
        var emps = data.extend.petList;
        var imgAndLogin = $(".imgAndLogin");
        var page_info = $("<div class='page-info'></div>");
        imgAndLogin.append(page_info);
        $(".page-info").append("当前"+emps.current+"页,总"+
            emps.pages+"页,总"+
            emps.total+"条记录");
    }
    // 3.解析显示宠物分页条数据
    function build_page_nav(data) {
        var emps = data.extend.petList;
        var imgAndLogin = $(".imgAndLogin");

        var  page_nav_area = $("<div class= 'page_nav_area'></div>")
        imgAndLogin.append(page_nav_area);
        var nav = $("<nav></nav>");
        page_nav_area.append(nav);

        var ul = $("<ul></ul>").addClass("pagination");
        nav.append(ul);
        //首页和上一页
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
        ul.append(firstPageLi).append(prePageLi);


        if (emps.current == 1) {
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        } else {
            //为元素添加点击翻页的事件
            firstPageLi.click(function () {
                to_page(1);
            });
            prePageLi.click(function () {
                to_page(emps.current - 1);
            });
        }

        // 中间部分
        var a;


        if(emps.pages - 4 >= emps.current){
            a = new Array(4);
            a[0] = emps.current;
            a[1] = emps.current+1;
            a[2] = emps.current+2;
            a[3] = emps.current+3;
        }

        if (emps.current>=2){
            a = new Array(4);
            a[0] = emps.current-1;
            a[1] = emps.current;
            a[2] = emps.current+1;
            a[3] = emps.current+2;
        }


        if(emps.pages - 4 < emps.current){
            if (emps.pages<4){
                a = new Array(emps.pages);
                if (emps.pages-3 ==0 ){ //表示只有3页
                    a[0] = 1;
                    a[1] = 2;
                    a[2] = 3;
                }
                if (emps.pages-2 ==0 ){ //表示只有2页
                    a[0] = 1;
                    a[1] = 2;
                }
                if (emps.pages-1 ==0 ){ //表示只有1页
                    a[0] = 1;
                }
            }else{
                a = new Array(4);
                a[0] = emps.pages-3;
                a[1] = emps.pages-2;
                a[2] = emps.pages-1;
                a[3] = emps.pages;
            }

        }

        if (emps.pages >= 5){
            if (emps.pages - 3 == emps.current ){
                // alert(1);
                a = new Array(4);
                a[0] = emps.current-1;
                a[1] = emps.current;
                a[2] = emps.current+1;
                a[3] = emps.current+2;
            }
            if (2 == emps.current ){
                a = new Array(4);
                a[0] = emps.current-1;
                a[1] = emps.current;
                a[2] = emps.current+1;
                a[3] = emps.current+2;
            }
        }











        $.each(a,function(index,item){

            var numLi = $("<li></li>").append($("<a></a>").append(item));
            if(emps.current == item){
                numLi.addClass("active");
            }
            if (emps.current != item){  // 排除本恶业跳转
                numLi.click(function(){
                    to_page(item);
                });
            }

            ul.append(numLi);
        });




        //添加下一页和末页 的提示
        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页"));
        ul.append(nextPageLi).append(lastPageLi);
        if(emps.current == emps.pages){
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }else{
            nextPageLi.click(function(){
                to_page(emps.current +1);
            });
            lastPageLi.click(function(){
                to_page(emps.pages);
            });
        }


    }

    // 给宠物的立即下单添加一个点击函数
    $(".imgAndLogin").delegate(".petId","click",function (){

        window.localStorage.setItem('ID',"宠物");

        // alert("我点击了");
        var petIntroduceMessage = $(this).parent().parent().parent().children(".petIntroduceMessage").text();
        // alert(petIntroduceMessage);
        var url = $(this).parent().parent().parent().parent().parent().children(".petImg").children(".petImgMessage").children(".petImgToUrl").attr("src");
        // alert(url);
        var petPrice = $(this).parent().parent().parent().children(".petPrice").text();
        var petId = $(this).parent().parent().parent().parent().parent().attr("petid");
        var petName = $(this).parent().parent().parent().parent().children(".petName").text();
        // alert(petId);
        window.localStorage.removeItem("shopNum");
        window.localStorage.setItem('petIntroduceMessage',petIntroduceMessage);
        window.localStorage.setItem('url',url);
        window.localStorage.setItem('petPrice',petPrice);
        window.localStorage.setItem("petId",petId);
        window.localStorage.setItem("petName",petName);
        window.location.href ="showIndent";
    });

    // 给宠物生活用品的立即下单添加一个点击函数
    // 给立即下单添加一个点击函数
    $(".imgAndLogin").delegate(".priceId","click",function (){
        window.localStorage.setItem('ID',"宠物生活用品");
        // alert("我点击了");
        var petIntroduceMessage = $(this).parent().parent().parent().children(".petIntroduceMessage").text();
        // alert(petIntroduceMessage);
        var url = $(this).parent().parent().parent().parent().parent().children(".petImg").children(".petImgMessage").children(".petImgToUrl").attr("src");
        // alert(url);
        var petPrice = $(this).parent().parent().parent().children(".petPrice").text();
        var petId = $(this).parent().parent().parent().parent().parent().attr("petid");
        var petName = $(this).parent().parent().parent().parent().children(".petName").text();
        // alert(petId);
        window.localStorage.removeItem("shopNum");
        window.localStorage.setItem('petIntroduceMessage',petIntroduceMessage);
        window.localStorage.setItem('url',url);
        window.localStorage.setItem('petPrice',petPrice);
        window.localStorage.setItem("petId",petId);
        window.localStorage.setItem("petName",petName);

        window.location.href ="showIndent";
    });


    // 给宠物分类下的宠物用品添加一个点击函数
    $(".commodity").delegate(".petTool","click",function (){

        to_page_Goods(1);

    });
    // 0.宠物用品分页跳转
    function to_page_Goods(pn){
        // 清空首页信息 和 停止轮播图
        $(".imgAndLogin").text("");
        firstImg =true;
        flag = false;
        notice = false;
        clearInterval(time);
        i = 0;
        var token = localStorage.getItem("Token");
        $.ajax({
            type:"GET",
            url:'petLifeGoodsPaging',
            data:{currentPage:pn},
            dataType:'json',
            beforeSend: function(request) {
                request.setRequestHeader("token", token);
            },
            success:function(data) {
                // alert(data.code);
                if (data.code == 200){

                    // 1.宠物的列表信息
                    build_page_petGoodsMessages(data);
                    //2、解析并显示分页信息
                    build_page_info_Goods(data);
                    //3、解析显示分页条数据
                    build_page_nav_Goods(data);

                }else {
                    // window.location.href ="index.html";
                }
            },
            error: function (){
                // window.location.href ="index.html";
            }
        });
    }
    // 1.显示宠物用品
    function build_page_petGoodsMessages(data) {
        var emps = data.extend.petGoodsList.records;
        var imgAndLogin = $(".imgAndLogin");
        var pet_h1 = $("<div class='pet-h1'></div>");
        var petMessages = $("<div class='petMessages'></div>");
        imgAndLogin.append(pet_h1).append(petMessages);
        pet_h1.append("<div>商品列表</div>" +
            "           <div class='pet_divider'></div>");


        var petImgAndMessage = $("<ul class='petImgAndMessage'></ul>");

        $.each(emps,function(index,item){
            var petId = item.priceId;
            var petName = item.priceName;
            var petUrl = item.url;
            var petIntroduce = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + item.introduce;
            // var petPrice = item.petPrice;

            petMessages.append(petImgAndMessage);
            var li = $("<li></li>").attr("petId",petId).attr("classify","宠物用品");
            var petImg = $("<span class='petImg'></span>");
            var petMessageToGoods = $("<span class='petMessageToGoods'></span>");
            petImgAndMessage.append(li);
            li.append(petImg).append(petMessageToGoods);
            var petImgMessage = $("<span class=petImgMessage></span>");
            petImg.append(petImgMessage);
            var img = $("<img class='petImgToUrl' style='width: 200px; height: 200px'>");
            img.attr("src",petUrl);
            petImgMessage.append(img);
            var petNames =  $("<span class='petName'></span>");
            petNames.append(petName);
            var petIntroduces = $("<div class='petIntroduce'></div>");
            petMessageToGoods.append(petNames).append(petIntroduces);
            var petIntroduceMessage = $("<span class='petIntroduceMessage'></span>");
            petIntroduceMessage.append(petIntroduce);
            var petPrice = $("<div class='petPrice'></div>");
            petPrice.append("￥"+ item.price);
            var shopMessage = $("<div class='shopMessage'></div>");
            petIntroduces.append(petIntroduceMessage).append(petPrice).append(shopMessage);
            var order = $("<span class='order'></span>");
            var priceId = $("<span class='priceId'>立即下单</span>");
            order.append(priceId);
            var shopCart = $("<span class='shopCart'></span>");
            shopMessage.append(order).append(shopCart);
            var showImg = $("<img src='img/show.png' style='width: 20px; height: 20px' >");
            shopCart.append(showImg).append("添加到购物车");

        });
    }
    // 2.解析显示宠物用品分页信息
    function build_page_info_Goods(data){
        var emps = data.extend.petGoodsList;
        var imgAndLogin = $(".imgAndLogin");
        var page_info = $("<div class='page-info'></div>");
        imgAndLogin.append(page_info);
        $(".page-info").append("当前"+emps.current+"页,总"+
            emps.pages+"页,总"+
            emps.total+"条记录");
    }
    // 3.解析显示宠物用品分页条数据
    function build_page_nav_Goods(data) {
        var emps = data.extend.petGoodsList;
        var imgAndLogin = $(".imgAndLogin");

        var  page_nav_area = $("<div class= 'page_nav_area'></div>")
        imgAndLogin.append(page_nav_area);
        var nav = $("<nav></nav>");
        page_nav_area.append(nav);

        var ul = $("<ul></ul>").addClass("pagination");
        nav.append(ul);
        //首页和上一页
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
        ul.append(firstPageLi).append(prePageLi);


        if (emps.current == 1) {
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        } else {
            //为元素添加点击翻页的事件
            firstPageLi.click(function () {
                to_page_Goods(1);
            });
            prePageLi.click(function () {
                to_page_Goods(emps.current - 1);
            });
        }

        // 中间部分
        var a;


        if(emps.pages - 4 >= emps.current){
            a = new Array(4);
            a[0] = emps.current;
            a[1] = emps.current+1;
            a[2] = emps.current+2;
            a[3] = emps.current+3;
        }

        if (emps.current>=2){
            a = new Array(4);
            a[0] = emps.current-1;
            a[1] = emps.current;
            a[2] = emps.current+1;
            a[3] = emps.current+2;
        }


        if(emps.pages - 4 < emps.current){
            if (emps.pages<4){
                a = new Array(emps.pages);
                if (emps.pages-3 ==0 ){ //表示只有3页
                    a[0] = 1;
                    a[1] = 2;
                    a[2] = 3;
                }
                if (emps.pages-2 ==0 ){ //表示只有2页
                    a[0] = 1;
                    a[1] = 2;
                }
                if (emps.pages-1 ==0 ){ //表示只有1页
                    a[0] = 1;
                }
            }else{
                a = new Array(4);
                a[0] = emps.pages-3;
                a[1] = emps.pages-2;
                a[2] = emps.pages-1;
                a[3] = emps.pages;
            }

        }

        if (emps.pages >= 5){
            if (emps.pages - 3 == emps.current ){
                // alert(1);
                a = new Array(4);
                a[0] = emps.current-1;
                a[1] = emps.current;
                a[2] = emps.current+1;
                a[3] = emps.current+2;
            }
        }






        // if (2 == emps.current ){
        //     a = new Array(4);
        //     a[0] = emps.current-1;
        //     a[1] = emps.current;
        //     a[2] = emps.current+1;
        //     a[3] = emps.current+2;
        // }




        $.each(a,function(index,item){

            var numLi = $("<li></li>").append($("<a></a>").append(item));
            if(emps.current == item){
                numLi.addClass("active");
            }
            if (emps.current != item){  // 排除本恶业跳转
                numLi.click(function(){
                    to_page_Goods   (item);
                });
            }

            ul.append(numLi);
        });




        //添加下一页和末页 的提示
        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页"));
        ul.append(nextPageLi).append(lastPageLi);
        if(emps.current == emps.pages){
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }else{
            nextPageLi.click(function(){
                to_page_Goods(emps.current +1);
            });
            lastPageLi.click(function(){
                to_page_Goods(emps.pages);
            });
        }


    }

    // 给安全退出绑定一个点击函数
    function end(){
        alert("我点击了退出");
        localStorage.clear("Token");
        window.location.href ="index.html";
    }

    // 给添加到购物车绑定一个点击函数
    $(".imgAndLogin").delegate(".shopCart","click",function (){

        var id = $(this).parent().parent().parent().parent().attr("petid");
        var classify = $(this).parent().parent().parent().parent().attr("classify");
        var url = $(this).parent().parent().parent().parent().children(".petImg").children(".petImgMessage").children(".petImgToUrl").attr("src");
        var names = $(this).parent().parent().parent().children(".petName").text();

        // alert(id+classify+url+name);
        // alert(names);
        var petPrice = $(this).parent().parent().children(".petPrice").text();
        money = petPrice.substr(petPrice.indexOf("￥")+1);
        var token = localStorage.getItem("Token");
        $.ajax({
            type:"POST",
            url:'insertShowCartMessage',
            data:{Id:id,classify:classify,url:url,name:names,money:money},
            dataType:'json',
            beforeSend: function(request) {
                request.setRequestHeader("token", token);
            },
            success:function(data) {
                if (data.code == 200){
                    alert("添加成功");
                }else {
                    alert("请勿重复添加");
                }
            }
            // error: function (){
            //     window.location.href ="index.html";
            // }
        });


    });

    // 导航条的购物车函数
    function shopCart(){
        shopCartTemplate();
    }

    // 导航条的购物车查询Ajax函数
    // 购物车模板
    var moneys ;
    function shopCartTemplate(){
        // 清空首页信息 和 停止轮播图
        $(".imgAndLogin").text("");
        firstImg =true;
        flag = false;
        notice = false;
        clearInterval(time);
        i = 0;
        var imgAndLogin = $(".imgAndLogin");
        var pet_h1 = $("<div class='pet-h1'></div>");
        var shopCartMessageDiv = $("<div class='shopCartMessageDiv'></div>");
        imgAndLogin.append(pet_h1).append(shopCartMessageDiv);
        pet_h1.append("<div>购物列表</div>" +
            "        <div class='pet_divider'></div>");
        var row = $(" <div class='row'></div>");
        shopCartMessageDiv.append(row);
        var col_md_10 = $("<div class='col-md-10'></div>");
        row.append(col_md_10);
        var table = $("<table class='table table-bordered'></table>");
        col_md_10.append(table);
        var thead = $("<thead></thead>");
        var tbody = $("<tbody></tbody>");
        table.append(thead).append(tbody);
        thead.append(" <tr>" +
            "                            <th class='left'></th>" +
            "                            <th>物品名称</th>" +
            "                            <th>单价</th>" +
            "                            <th>数量</th>" +
            "                            <th>合计</th>" +
            "                            <th class='right'>操作</th>" +
            "                        </tr>");




        var token = localStorage.getItem("Token");
        $.ajax({
            type: "GET",
            url: 'selectAllShopCartByUsername',
            dataType: 'json',
            beforeSend: function (request) {
                request.setRequestHeader("token", token);
            },
            success: function (data) {
                var emps = data.extend.list;
                if (data.code == 200) {
                    $.each(emps, function (index, item) {
                        moneys = item.money;
                        var tr = $("<tr></tr>");
                        var th1 = $("<th class='left'></th>");
                        var img = $("<img height='100' width='100'/>").attr("src",item.url);
                        th1.append(img);
                        var th2 = $("<th></th>");
                        var shopSpan;

                        if (item.petName != null){
                            shopSpan = $("<div class='shopSpan'></div>").append(item.petName);
                        }
                        if (item.lifeGoodsName != null){
                            shopSpan = $("<div class='shopSpan'></div>").append(item.lifeGoodsName);
                        }
                        th2.append(shopSpan);
                        var th3 = $("<th class='oneMoney'></th>").append(item.money);
                        var th4 = $("<th><input class='shopNum' type='text'></th>");
                        var th5 = $("<th></th>").append(item.money).addClass("shopMoneyMessage");
                        var th6 = $("<th class='right'>" +
                            "         <div class='immediatePurchase'>立即购买</div>" +
                            "         <div class='deleteShopCartMessage'>删除</div>" +
                            "         </th>");
                        if (item.petId != null){
                            tr.attr("classify",item.classify).attr("petId",item.petId);
                        }
                        if (item.lifeGoodsId != null){
                            tr.attr("classify",item.classify).attr("petId",item.lifeGoodsId);
                        }
                        tr.append(th1).append(th2).append(th3)
                            .append(th4).append(th5).append(th6);

                        tbody.append(tr);
                    });
                }
            }
        });


    }




    // 购物车的总金额的计算
    var ret = /^[0-9]*$/;
    $(".imgAndLogin").delegate(".shopNum","keyup",function (){

        var shopNum = $(this).val();
        shopNum = parseInt(shopNum);
        var oneMoney = $(this).parent().parent().children(".oneMoney").text();
        var shopNums = parseInt(shopNum);

        if (shopNum == ' ' ){
            $(this).parent().parent().children(".shopMoneyMessage").text(oneMomey);
            return;
        }else {
            $(this).parent().parent().children(".shopMoneyMessage")
                .text((shopNum*oneMoney).toFixed(2));
        }

        // alert(shopNum + shopMoneyMessage );

        if (!ret.test(shopNum)){
            $(this).parent().parent().children(".shopMoneyMessage").text(oneMomey);
            return;
        }


        if (shopNum > 1000){
            alert("单次购买数量最大为1000");
            return;
        }

    });

    // 给购物车的立即下单，绑定一个点击函数 immediatePurchase
    $(".imgAndLogin").delegate(".immediatePurchase","click",function (){
        var id = $(this).parent().parent().attr("petid");
        var shopNum = $(this).parent().parent().children().children(".shopNum").val();
        var classify = $(this).parent().parent().attr("classify");
        var oneMoney = $(this).parent().parent().children(".oneMoney").text();
        var url = $(this).parent().parent().children(".left").children().attr("src");
        var shopName = $(this).parent().parent().children().children(".shopSpan").text();
        // alert(id+shopNum+classify+shopSpan+url+oneMoney);
        if (!ret.test(shopNum)){
            $(this).parent().parent().children(".shopMoneyMessage").text(oneMoney);
            alert("请输入正确的购买数量");
            return;
        }

        if (shopNum > 1000){
            alert("单次购买数量最大为1000");
            return;
        }



        id = parseInt(id);

        var token = localStorage.getItem("Token");
        $.ajax({
            type:"GET",
            url:'selectMessageByIdAndClassify',
            data:{Id:id , Classify:classify},
            dataType:'json',
            beforeSend: function(request) {
                request.setRequestHeader("token", token);
            },
            success:function(data) {
                if (data.code == 200){
                    petIntroduceMessage = data.extend.message;
                    window.localStorage.setItem('petIntroduceMessage',petIntroduceMessage);
                    window.localStorage.setItem('url',url);
                    window.localStorage.setItem('classify',classify);
                    window.localStorage.setItem('petPrice',oneMoney);
                    window.localStorage.setItem("petId",id);
                    window.localStorage.setItem("shopNum",shopNum);
                    window.localStorage.setItem("petName",shopName);
                    window.location.href ="showIndent";
                }else {
                    window.location.href ="index.html";
                }
            },
            error: function (){
                window.location.href ="index.html";
            }
        });




    });

    // 给购物车的下单绑定一个点击函数
    $(".imgAndLogin").delegate(".deleteShopCartMessage","click",function (){
        var id = $(this).parent().parent().attr("petid");
        var classify = $(this).parent().parent().attr("classify");
        var token = localStorage.getItem("Token");
        $.ajax({
            type:"GET",
            url:'deleteShopCartMessageByIdAndClassify',
            data:{Id:id , Classify:classify},
            dataType:'json',
            beforeSend: function(request) {
                request.setRequestHeader("token", token);
            },
            success:function(data) {
                if (data.code == 200){
                    alert("删除成功");
                    shopCartTemplate();
                }else {
                    window.location.href ="index.html";
                }
            },
            error: function (){
                window.location.href ="index.html";
            }
        });
    });

</script>


<style type="text/css">
    html {
        overflow-y: scroll;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }



    body {
        width:100%;
        height:100%;
        background-color: #f7f7f7;
        /*background-image:url("img/flowers.png");*/
        /*background-repeat:no-repeat;*/
        /*background-size:cover;*/
    }

    .header{
        height: 100%;
        width: 100%;
        background-color: black;
        overflow: hidden;
        font-size: 15px;
    }
    .header .nav{
        color: #d7dbd9;
        float: left;
    }
    .nav ul{
        list-style: none;
    }
    .nav ul li{
        float: left;
        margin-left: 20px;
        margin-top: 8px;
        padding-bottom: 5px;
    }
    .header{

    }
    .header .nav li:hover{
        color: white;
        /*background-color: rgba(255, 255, 255);*/
    }
    .header .nav .welcome{
        margin-left: 80px;
        box-sizing: border-box;
        font-size: 15px;
    }

    .indent:hover .PetAndGoods{
        display: block;
    }
    .header .nav  .registration{
        margin-left: 220px;
    }
    .header .nav .show-img{
        margin-top:6px;
    }
    .header .nav .show{
        margin-left: 5px;
    }
    .header .nav .end{
        margin-left: 380px;
        margin-right: 0;
    }

    .nav ul .indent:hover .PetAndGoodsDIV{
        display: block;
    }

    .PetAndGoodsDIV .petIndentMessage:hover{
        background-color: black;
    }
    .PetAndGoodsDIV .GoodsIndentMessage:hover{
        background-color: black;
    }

    .nav{
        position: absolute;
        background-color: black;
        width: 100%;
    }
    .indent{
        position: relative;
    }
    .nav ul .indent .PetAndGoodsDIV{
        display: none;
        color: black;
        /*top:25px;*/
        /*width: 90px;*/
        background-color: #454040;
        padding: 0;
        /*left: 735px;*/
        /*left: -15px;*/
        /*background-color:yellow;*/
    }


    .PetAndGoodsDIV .petIndentMessage{
        padding-top: 3px;
        padding-bottom: 3px;
        position: absolute;
        /*width: 100%;*/
        /*background-color:yellow;*/
        width: 90px;
        text-align: center;
        margin-top: 0;
        top: 25px;
        left: -35px;
        /*padding-left: 14px;*/
        /*left: 10px;*/
        /*background-color: black;*/
    }

    .PetAndGoodsDIV .GoodsIndentMessage{
        position: absolute;
        /*background-color:red;*/
        margin-top: 0;
        top: 50px;
        width: 90px;
        /*top: 3px;*/
        left: -35px;
        padding-top: 3px;
        padding-bottom: 3px;
    }




    .main{
        width: 70%;
        height: 100%;
        /*background-color: #5bc0de;*/
        margin: auto;
        overflow: hidden;
    }
    .main .theme{
        width: 100%;
        margin-top: 40px;
        font-size: 35px;
    }
    .main .theme-nav{
        margin-top: 15px;
    }
    .main .theme-nav ul{
        margin-top: 10px;
        list-style:none;
    }
    .main .theme-nav ul li{
        margin-left: 30px;
        font-size: 18px;
        float: left;
    }
    .main .theme-nav .first{
        float: left;
        margin-left: -40px;
    }
    /*.main .theme-nav .home{*/
    /*    margin-left: 135px;*/
    /*}*/

    .theme-nav .commodity{
        position: relative;
        /*left: 370px;*/
    }

    .theme-nav .commodity:hover .goods-body{
        display: block;
    }

    .theme-nav .goods li:hover{
        background-color: black;
        /*background-color: #9d9d9d;*/
        color: white;
    }

    .main .goods-body{
        position: absolute;
        /*left: 360px;*/
        width: 73px;
        height: 53px;
        box-sizing: border-box;
        background-color: white;
        /*top: 127px;*/
        display: none;
        color: #667079;
        z-index: 2;
    }
    .main .goods{
        /*position: relative;*/
        width: 100%;
        height: 100%;
        /*left: -30px;*/
        /*margin-right: 20px;*/
        /*top: -5px;*/
        padding-left: 0;
    }
    .goods .pet{
        position: absolute;
        /*text-align: center;*/
        width: 100%;
        top: 2px;
        margin-left: 0;
        left: -30px;
        font-weight:normal;
        /*margin-left: 0;*/
    }
    .goods .petTool{
        position: absolute;
        width: 100%;
        left: -30px;
        top: 2px;
        margin-top: 25px;
        /*margin-left: 0;*/
    }

    /*.goods .clothes{*/
    /*    position: relative;*/
    /*    left: -65px;*/
    /*}*/
    /*.goods .toy{*/
    /*    position: relative;*/
    /*    left: -65px;*/
    /*}*/

    .goods-body .goods ul li:hover{
        background-color: orange !important;
    }
    .main .imgAndLogin{
        margin-top: 50px;
        overflow: hidden;
    }

    .mainToLogin label{

        margin: 10px 0;
        font-size: 15px;
    }
    .mainToLogin input {
        width: 320px;
        display: block;
        height: 36px;
        border: 0;
        outline: 0;
        padding: 6px 10px;
        line-height: 24px;
        border-radius: 30px;
        /*background-color: #7bcdc4;*/
        -webkit-transition: all 0s ease-in 0.1ms;
        -moz-transition: all 0s ease-in 0.1ms;
        transition: all 0s ease-in 0.1ms;
    }
    .mainToLogin input[type="text"] , .container input[type="password"]  {
        background-color: #FFFFFF;
        font-size: 16px;
    }

    .mainToLogin input[type='submit'] {
        font-size: 16px;
        letter-spacing: 2px;
        color: #666666;
        background-color: #FFFFFF;
    }


    .theme-message img{
        border-radius: 5%;
    }

    .main .message{
        margin-top: 10px;
        font-size: 20px;
    }

    /* 宠物和寄养 */
    .row .table-bordered tr th{
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
    }

    .row .fosterAndPetToSpan{
        margin-top: 50px;
        font-size: 25px;
    }
    .row .h1_divider{
        margin-top: 20px;
        width: 100%;
        height: 1px;
        background-color: #9d9d9d;
    }
    .row .foster_divider{
        width: 100%;
        margin-top: 7px;
        height: 2px;
        margin-left: 87px;
        background-color: #91bfcd;
    }

    .row .fosterAndPet{
        margin-left: 10px;
        margin-top: 50px;
        font-size: 16px;
    }
    .row .fosterMessage{
        padding: 10px;
        border: 2px #91bfcd solid;
        border-bottom: none;
        /*color: white;*/
    }
    .row .petMessage{
        margin-left: 5px;
        padding: 7px 10px;
        background-color: #2589a7;
        border-radius: 30px;
        color: white;
    }

    .row .col-md-10 .table{
        margin-left: 100px;
    }

    /*.indentTable table,table tr th, table tr td {*/
    /*    margin-top: 30px;*/
    /*    border-top:1px solid black !important;*/
    /*}*/


    .mePet .row .col-md-10{
        margin-top: 30px;
    }

    .mePet .row tr {

        border:1px solid black !important;
    }
    .mePet .row th {
        margin-top: 30px;
        border:1px solid black !important;
    }

    .indentTable{
        margin-top: 30px;
    }
    .indentTable .row tr {

        border:1px solid black !important;
    }
    .indentTable .row th {
        margin-top: 30px;
        border:1px solid black !important;
    }

    .imgAndLogin .notice{
        overflow: hidden;
        box-sizing:border-box;
        margin-top: 18px;
        font-size: 30px;
    }
    .imgAndLogin .deleteFoster{
        color: red;
    }
    /*.imgAndLogin .through{*/
    /*    color: #1b42a7;*/
    /*}*/
    .imgAndLogin .noThrough{
        color: red;
    }

    .date{
        margin-top: 20px;
        margin-left: 60px;
        font-size: 20px;
    }
    .dateToMessage{
        font-size: 20px;
        margin-top: 18px;
        margin-left: 120px;
    }

    .dateAndMessage{
        display: inline-block;
    }

    .imgAndLogin .registrationMessage{
        margin-top: 50px;
        font-size: 25px;
        width: 100%;
        height: 100%;
    }

    .imgAndLogin .registration_divider{
        margin-top: 20px;
        width: 100%;
        height: 1px;
        background-color: #9d9d9d;
    }
    .registrationDate{
        font-size: 15px;
        margin: 30px;
    }
    .registrationDate .begin-h1 {
        font-size: 20px;
    }
    .beginDate .begin-h1{
        font-size: 20px;
    }
    .beginDate .beginMessage{
        margin-top: 10px;
        margin-left: 30px;
    }

    .registrationDate input{
        border: 1px solid #9d9d9d;
    }

    .registrationDate .endDate{
        margin-top: 10px;
    }
    .registrationDate .endDate .end-h1{
        font-size: 20px;
    }
    .endDate .endMessage{
        margin-top: 10px;
        margin-left: 30px;
    }
    .registrationWhy{
        margin-top: 10px;
    }
    .registrationWhy .registrationWhy-h1{
        font-size: 20px;
    }

    .whyMessage{
        margin-top: 10px;
        width: 56%;
        height: 100px;
    }
    .registrationWhy  .registrationButton{
        margin-top: 20px;
    }
    .registrationWhy .submit {
        margin-left: 130px;
        color: white;
        padding: 10px 20px;
        font-size: 20px;
        background-color: #2589a7;
        border-radius: 30px;
    }
    .registrationWhy .cancel{
        margin-left: 120px;
        background-color: #2589a7;
        color: white;
        padding: 10px 20px;
        font-size: 20px;
        border-radius: 30px;
    }

    .imgAndLogin .indentMessage{
        margin-top: 50px;
        font-size: 25px;
        width: 100%;
        height: 100%;
    }

    .imgAndLogin .indent_divider{
        margin-top: 20px;
        width: 100%;
        height: 1px;
        background-color: #9d9d9d;
    }
    #indent_table{
        font-size: 15px;
    }
    .noPayment{
        color: #288728;
    }
    .payment{
        color: #288728;
    }

    /* 个人信息 */
    .userMessage .userMessage_divider{
        margin-top: 20px;
        width: 100%;
        height: 1px;
        background-color: #9d9d9d;
    }
    .userMessage .userMessage-h1{
        margin-top: 50px;
        font-size: 25px;
    }

    .userMessage .h1_divider{
        margin-top: 20px;
        width: 100%;
        height: 1px;
        background-color: #9d9d9d;
    }

    .MessageToUsernameAndPassword {
        background-image: url("img/flowers.png");
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat:no-repeat;
    }

    .MessageToUsernameAndPassword label {
        margin: 10px 20px;
        font-size: 15px;
    }

    label {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .MessageToUsernameAndPassword input {
        width: 320px;
        display: block;
        height: 36px;
        border: 0;
        outline: 0;
        padding: 6px 10px;
        line-height: 24px;
        border-radius: 30px;
        margin-left: 40px;
        /*background-color: #7bcdc4;*/
        -webkit-transition: all 0s ease-in 0.1ms;
        -moz-transition: all 0s ease-in 0.1ms;
        transition: all 0s ease-in 0.1ms;
    }
    .MessageToUsernameAndPassword input[type="text"] , .container input[type="password"]  {
        background-color: #FFFFFF;
        font-size: 16px;
    }

    .MessageToUsernameAndPassword input[type='submit'] {
        padding: 10px 20px;
        font-size: 20px;
        letter-spacing: 2px;
        color: #666666;
        background-color: #FFFFFF;
    }
    .MessageToUsernameAndPassword .harvestHome{
        margin-left: 40px;
        width: 50%;
        height: 100px;
    }
    .updatePasswordButton .passwordButton {
        margin-top: 10px;
        padding: 10px 20px;
        -webkit-border-radius: 30px;
        margin-left: 170px;
        margin-bottom: 20px;
    }
    .updatePasswordButton .cancelButton {
        margin-top: 10px;
        margin-bottom: 20px;
        padding: 10px 20px;
        border-radius: 30px;
        margin-left: 70px;
    }

    /* 购物宠物 */


    .imgAndLogin .pet-h1{
        margin-top: 50px;
        font-size: 25px;
    }
    .pet-h1 .pet_divider{
        margin-top: 20px;
        width: 100%;
        height: 1px;
        background-color: #9d9d9d;
    }

    /*.petImg{*/
    /*    margin-left: 20px;*/
    /*}*/

    .petImgAndMessage{
        margin: 0 auto;
        padding: 20px;
        width: 70%;
        height: 100%;
    }
    .petImgAndMessage li{
        overflow: hidden;
        list-style-type: none;
        border: 1px solid rgb(230, 238, 238);
        /*border: 1px solid black;*/
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .petImgAndMessage li:hover{
        border: 1px solid orange;
    }

    .petImgAndMessage .petIntroduceMessage{
        font-size: 17px;
    }
    /*.petImg{*/
    /*    overflow: hidden;*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*    margin-left: 20px;*/
    /*    margin-top: 20px;*/
    /*}*/

    .petImgAndMessage .petImgMessage{
        margin-left: 20px;

    }


    .petMessageToGoods{
        position: absolute;
    }
    .petMessageToGoods .petName{
        position: relative;
        font-size: 23px;
        /*top: 50px;*/
        left: 20px;
    }
    .petMessageToGoods .petIntroduce{
        width: 450px;
        height: 200px;
        margin-top: 20px;
        margin-left: 20px;
    }
    .petMessageToGoods .petIntroduce:first-child span{
        font-size: 20px;
    }

    .petMessageToGoods .petPrice{
        color: #fd3f31;
        font-size: 25px;
        margin-left: 20px;
        margin-top: 10px;
    }
    .petIntroduce{
        width: 60%;
        overflow: hidden;
    }
    .petIntroduce .shopMessage{
        margin-top: 10px;
    }
    .shopMessage .petId{
        background-color: orange;
        padding: 7px 15px;
        font-size: 20px;
        border-radius: 30px;
    }

    .shopMessage .priceId{
        background-color: orange;
        padding: 7px 15px;
        font-size: 20px;
        border-radius: 30px;
    }
    /*.shopMessage .order{*/
    /*    background-color: orange;*/
    /*    padding: 7px 15px;*/
    /*    font-size: 20px;*/
    /*    border-radius: 30px;*/
    /*}*/

    .shopMessage .shopCart{
        margin-left: 10px;
        background-color: #90de90;
        padding: 7px 15px;
        font-size: 20px;
        border-radius: 30px;
    }

    .shopMessage .shopCart img{
        margin-right: 4px;
        margin-top: -3px;
    }

    /* 宠物的分页信息 */
    .imgAndLogin .page-info{
        font-size: 25px;
        float: left;
        margin-left: 200px;
        margin-top: 10px;
    }

    .imgAndLogin .page_nav_area{
        float: right;
        font-size: 20px;
        margin-top: -10px;
        margin-right: 200px;
    }

    .shopCartMessageDiv .table{
        margin-top: 20px;
    }
    .shopCartMessageDiv thead{
        font-size: 18px;
        /*border: 1px solid white;*/
        border-top: none;
        border-left: none;
        border-right: none;
    }
    .shopCartMessageDiv .thead  tr {
        border-top: none;
        border-left: none;
        border-right: none;
    }
    .shopCartMessageDiv .thead  tr th{
        border-top: none;
        border-left: none;
        border-right: none;
    }
    .shopCartMessageDiv .table  tr th{
        /*border: 1px solid black;*/
        border-left: none;
        border-right: none;
        border-top: none;
    }
    .shopCartMessageDiv .table {
        /*border-left: none;*/
        /*border-right: none;*/
    }
   input{
       /*box-shadow:none; !*去除阴影*!*/
       outline: none;/*聚焦input的蓝色边框*/
       resize: none; /*textarea 禁止拖拽*/
       border: none; /*去除边框*/
       -webkit-appearance: none;/*常用于IOS下移除原生样式*/
       -webkit-tap-highlight-color: rgba(0,0,0,0); /*点击高亮的颜色*/
   }
    .shopCartMessageDiv .shopNum{
        border: 1px solid black;
        width: 40px;
        border-radius: 30px;
        text-align: center;
        line-height: 20px;
    }

    .shopCartMessageDiv .right div{
        font-size: 17px;
        margin-top: 5px;
        line-height: 20px;
        list-style: none;
        padding: 8px 5px;
    }

    .shopCartMessageDiv .immediatePurchase {
        background-color: orange;
        color: white;
        width: 100px;
        padding: 0px 10px;
        margin-left: 100px;
        border-radius: 30px;
    }
    .shopCartMessageDiv .deleteShopCartMessage{
        background-color: red;
        border-radius: 30px;
        width: 100px;
        margin-left: 100px;
        padding: 0px 20px;
        color: white;
    }

</style>


</body>
</html>
